Blog - LINE ENGINEERING

TAG ARCHIVES: Flex Message

Flex Message 2023 新的更新讓 LINE 訊息設計更加自由
Jirawatee2023-07-11
I am a technology evangelist at LINE.
利用 Flex Message 的強大功能，您可以根據自己的需求靈活設計。它可以迅速顯示結果，無論在智能手機或 PC 上的LINE應用程序，還是通過 Messaging API 或 LIFF 應用程序發送都可以支援。可以確定的是，到2023年為止，全球 LINE 開發者向用戶發送的最受歡迎的消息類型就是 Flex Message。今年，LINE 在 Flex Message 的開發上推出了兩項新功能以更好地滿足用戶的需求。它增加了兩種新的 Bubble 尺寸選項，並使字體和圖示可以根據設定的字體大小自動調整。在我們深入瞭解這兩項新功能之前，如果你是一位初次接觸 Flex Message 的開發者，我強烈建議你先閱讀下面的文章。為了更多的理解，參考文章: Flex Message打破了LINE Messaging API中傳統的消息顯示規則(泰文)。 1. 新增 Bubble 尺寸今年，LINE新增了兩種新的 Bubble 尺寸選項，分別為 hecto 和 deca。這兩種尺寸都適中，介於 kilo 和 micro 之間
- LINE BOT
- Flex Message
透過 Flex Simulator 有效率開發與除錯 FLEX Message 以 Go SDK 為範例
Evan Lin2023-06-16
LINE Taiwan Technology Evangelist
前提 LINE Bot 的開發上， Flex Message 是一個強大又美觀的訊息顯示方式。並且可以發出多種類型訊息格式。本篇文章分享了，如何透過快速版本設計來寫出你想要的形式。本篇文章將透過一個流程，循序漸進告訴你如何完成上面的範例訊息，並且如果開發 FLEX Message 上的問題時，也可以透過 FLEX Simulator 來幫你除錯。開始了，設計苦手任何的前端苦手（像是我），都對於如何找到一個好 Flex 的格式內容感覺很辛苦。這時候可以考慮使用 FLEX Simulator 先做你的起手式。 (FLEX Message Simulator 提供給你所見即所得的編輯方式）這裡也推驗”藉由 Flex Message Simulator 實現並發送測試用 Flex Message” 讓你對於 FLEX Message Simulator 有更深刻的了解。透過 Showcase 挑選喜歡的樣板這裡可以挑選喜歡的格式，我們先挑選出我們喜歡的 “Lo
如何透過 LINE Video Flex Message 來打造影片翻譯（自動輸出文字）LINE Bot 聊天機器人
Evan Lin2022-04-21
LINE Taiwan Technology Evangelist
前言:大家好，我是 LINE 台灣的資深技術推廣工程師的 Evan Lin 。 Flex Message Update 3 在日前公佈了，除了帶來更多樣的客製化項目。最讓人注意的莫過於可以在 Flex Message 中顯示影片元件的 Flex Message including a video 了。本篇文章將透過一個長輩使用 LINE 來跟家裡人溝通很常看到的案例，並且展示如何透過 STT 的技術來讓 Flex Message 顯示更多，更有用的資訊來幫助你。解決的問題痛點不知道大家是否有類似的問題，有一些長輩或是朋友們由於可能不方便打字，經常都透過語音訊息來溝通。但是許多時候其實是不方便打開手機音量來「聽訊息」或者是「看語音影片」的，比如說在捷運上，或是在會議之中。這個時候，經常會想到說是否有一個方便的服務可以透過上傳影片（或是語音檔案）的方式。透過 STT ( Speech-To-Text )的技術來幫影片中的語音翻譯出文字，並且透過 LINE 這次開放的 Flex Message Update 3 新格式，來讓
2022 年 Flex Message 的 3 項新功能 LINE 中訊息設計釋放無限自由
Jirawatee2022-03-11
I am a technology evangelist at LINE.
我相信，喜歡 LINE 的開發者們正在熱切期待 Flex Message 中新功能的到來，以實現以“跳出框框思考”的方式在 LINE 中發揮訊息的想像力，無論是通過 LINE 聊天機器人還是通過 LIFF App 的發送。對於任何遇到過這篇文章的人。第一次聽到 Flex Message 這個詞，我建議你先在這篇文章中了解它的功能。讓我們看一下 Flex Message for 2022 中的三個新功能，它們將幫助您與訂閱者進行有效溝通。包括能夠更多地表達自己。影片元件 (Video Component)Box 組件中的最大寬度和最大高度行距 ใน 文字元件1. 影片元件一直在我們家玩Flex Message的開發者期待已久的功能之一出來了。現在我們可以將影片添加到Hero 塊中。影片元件內的屬性type：（video 必填）url：支持HTTPS（TLS 1.2 或更高版本）且後綴為mp4 的影片檔案的URL，文件大小不得超過200MB （必填）。previewUrl : 支持 HTTPS（TLS 1.2 或更高版本）的預覽圖片的 URL，擴展名為 JPE
- Flex Message
藉由 Flex Message Simulator 實現並發送測試用 Flex Message
Nijia Lin2021-06-11
LINE Taiwan Technology Evangelist
索引Flex Message 簡介如何設計與測試 Flex Message？使用 Flex Message Simulator其他範例提供前言平時開發 LINE Bot 相關功能時，我們都會使用許多的文字、貼圖、圖片...來實現一個服務所需要的對話流程，而在開發許久之後，總想為自己的 LINE Bot 添加更多有特色的內容，不論是在文字中加入特殊符號、發送對應情境的貼圖、影片..等等。而在 LINE Bot 中有個可以讓開發者自由添加各種特色的訊息選單 - Flex Message，那這個功能有什麼特別的呢？以及我可以如何快速測試使用這功能呢？以下就讓我為各位介紹介紹。Flex Message 簡介Flex Message 是什麼？它是一個 LINE 很強大的訊息圖文選單，能夠讓開發者透過 JSON 的方式建立起漂亮的選單(如下)，讓 LINE 官方帳號(Official Account)的擁有者(Provider)可以使用設計過的訊息選單與用戶做更多的互動。當中的許多設計概念與 CSS 的 Flex Box 相似，如果有開發過前端的朋友也歡迎來
做一個 LINE Chatbot 的 Side Project 可能會遇到的一些眉角
Nijia Lin2021-02-03
LINE Taiwan Technology Evangelist
前言跟在時事上的任何作品我相信都紅很快，如口罩地圖、動森揪團系統...，只是這些題目紅的時候我個人沒有那麼大的憧憬去做相關題目。去年原本有東南亞職業聯賽 (ABL)，我也做了一隻 Chatbot，只是當時用比較土炮的方法用 CSV 輸入議程，每次查詢時都進 CSV 查詢，但也適逢疫情關係而聯盟停辦進而機器人荒廢。但在最近出現了一個籃球新聯盟 P+ league，而我既然學 Python 也一段時間了也該拿來試試看爬蟲，因此下定決定開爬，以下會記錄一下在這過程中我有遇到的問題。P+ League 助理加入好友環境HerokuPython 3.9LINE v11.0.0LINE Bot SDK 1.18.0流程過往在很習慣寫完一個 side project 就在技術社團發文介紹作品，但因為 Chatbot 較多是在應用層面，因此主力若在技術社團上發則會可能會遇到一些問題：受眾不同面向不是範例或是研究的 Code因此在這次我就嘗試了新的作法：尋找 ptt 台灣相關籃球的版，最後找到basketballTWFacebook 一樣找一輪，找到 P.LEAGUE + 台灣新職業籃球聯賽
- LINE Chatbot
- Flex Message
使用 2020 Flex Message 的 10 個新功能 - 讓您在 LINE 的訊息設計更有彈性
Jirawatee2021-01-25
I am a technology evangelist at LINE.
原文經常許多開發人員會在 LINE 中設計 Flex Message，讓不同設備的使用者可以收到美美的訊息。在 2020 年也就是去年，Flex Message 開發團隊聽到各位開發者的聲音了，發布了比以往更輕鬆並能將您的想像力轉換成 LINE 樣式的版本。若您對於 Flex Message 不熟悉，建議先了解這篇文章。使用 Flex Message 打破 LINE Messaging API 中的傳統顯示規則這次有 10 個新功能，將有助於了解 2020 年 Flex Message 中訊息設計的延展性。APNG Support內容排版字體大小和圖示大小（以 px 為單位）Shrink-to-Fit漸層背景(Gradient Background)使用 px 來設定 Margin & Spacing圖片大小（以 px 和％為單位）內容可為空的 Box(Empty Box)增加了單一 Bubble 的 JSON Max size增加了 Carousel 的 Bubble 數量您只需查看每個功能的名稱即可。我將會在你的查詢過程中告訴您～1. APNG Support當今天有任
- LINE messaging API
- Flex Message
在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友
Nijia Lin2020-09-14
LINE Taiwan Technology Evangelist
前言以往在 LINE 平台上發送公告相關訊息時都只能編排文字順序、傳另一個圖片、抑或是傳影片...anyway，而隨著 LINE 推出了 Flex Message 讓開發者可以將訊息當作網頁 CSS 樣式塑造出一個客製化的訊息格式，這在 Chatbot 的領域裡基本上可以算是殺手級功能了，Chatbot 可以在過程中可以依照對話流程釋出不同樣版的內容，讓使用者體驗更上一層。隨著時間的演進 LINE 也 release 了自家的前端框架 - LIFF，開發者能夠很快速的使用到 LINE Login 的相關功能並且整合到 Chatbot 上面，讓整體服務的使用體驗更上一層，接著在近些日子釋出了本篇介紹的主軸 - ShareTargetPicker，其功能主要是能將之前只有 Chatbot 才能使用的 Flex Message 透過 LIFF 的這隻 API 使用發送者的名義將客製化訊息幫忙發送給使用者/群組/聊天室，讓我在群組公布訊息時能有煥然一新的模樣呢！也有 LINE API Expert 分享的看起來很專業的 LINE
Flex Message 的 Update 1 已公開
Sho Tachibana2019-09-11
I am a technical evangelist for the LINE platform, including LINE Messaging API and LINE Login.
各位好，我是 Sho Tachibana，我在 LINE 擔任 Technical Evangelist，負責協助各位開發者成功使用 LINE 的 API 並創造商機。Flex Message Update 1 已公開且變得更加好用，容我為各位介紹其新功能。何謂 Flex Message?Flex Message 是一種對話介面，可使用 CSS Flexible Box (CSS Flexbox) 的基礎知識，自由客製化版面。支援的用戶端版本支援所有版本，但唯有使用 text 元素的 maxLines 時，iOS 版的 LINE 與 Android 版的 LINE 皆須為 9.8.0 以後版本，PC 版則必須為 5.17 以後版本。新功能對話框大小原本 bubble 元素的寬度無法改變，但現在已能藉由指定 size 屬性的方式，改變其寬度。可指定的選項為 giga、mega、kilo、micro、nano。另外，橫向捲軸內的對話框寬度，將套用：最大尺寸畫面寬度的 80%兩者中較小的一方 (不會超過畫面尺寸的 80% 以上)。令人驚喜的改變！可使用 Flex Message，建立與範本訊
- Messaging API
- Flex Message

1